<template>
	<view class="head">
		<u-sticky>
			<view style="padding: 10rpx 0rpx 10rpx 0rpx;background-color: white;display: flex;">
				<u-icon name="list" style="margin: 0rpx 20rpx 0rpx 20rpx;" @click="popupShow=true" :color="getColor()">
				</u-icon>
				<u-search :showAction="true" actionText="搜索" :animation="false" borderColor="rgb(241, 241, 241)"
					placeholder='请输入客户姓名' @custom="search" v-model="orderNum" @search="search"></u-search>

			</view>
			<!-- 			<view style="background-color: white;border-bottom: 0px dotted white;">
				<u-tabs @click="tabsClick" :list="titleList" lineWidth="30" :lineColor="`url(${lineBg}) 100% 100%`"
					:activeStyle="{
					            color: '#3b3b41',
					            fontWeight: 'bold',
					            transform: 'scale(1.05)'
					        }" :inactiveStyle="{
					            color: '#606266',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
			</view> -->

		</u-sticky>
		<view>
			<up-list class="myList" @scrolltolower="scrolltolower">
				<up-list-item v-for="(item,index) in dataList" :key="index">
					<view class="order">
						<!-- 	<span class="badge">{{getStatus(item.status)}}</span> -->
						<view class="order-number">
							<view class="number-left">
								<image src="/static/supplyChain/number.png" mode="widthFix"></image>
								<text>{{item.customerName}}</text>
							</view>
							<view class="number-right"
								:class="item.status == 3 ? 'green':item.status == 2?'blue':'red'">
							</view>
						</view>
						<view class="order-item" v-if="this.status!=1">
							<up-icon name="home-fill" color="#ff0000" size="22"></up-icon>
							<text style="font-size: 35rpx;font-weight: bold; color: #000000;" class="row1">{{ (item.parkName.split("_"))[item.parkName.split("_").length - 1]
                          }}</text>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="calendar" color="#4a4a4a"></up-icon>
								<text>申请日期：</text>
								<text class="myText">{{ item.createDate }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="star" color="#4a4a4a"></up-icon>
								<text>部门：</text>
								<text class="myText">{{ item.departmentName }}</text>
							</view>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="home" color="#4a4a4a"></up-icon>
								<text>所在区域：</text>
								<text class="myText">{{ item.department }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="tags" color="#4a4a4a"></up-icon>
								<text>客户付款方式：</text>
								<text class="myText">{{ item.customerPay }}</text>
							</view>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="man-add" color="#4a4a4a"></up-icon>
								<text>销售人员：</text>
								<text class="myText">{{ item.salePerson }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="phone" color="#4a4a4a"></up-icon>
								<text>联系方式：</text>
								<text class="myText">{{ item.customerPhone }}</text>
							</view>
						</view>
						<view class="order-item">
							<up-icon name="account" color="#4a4a4a"></up-icon>
							<text>客户编号：</text>
							<text class="myText">{{ item.customerNo }}</text>
						</view>
						<view class="order-item">
							<up-icon name="server-man" color="#4a4a4a"></up-icon>
							<text>收货人：</text>
							<text class="myText">{{ item.customerTake }}</text>
						</view>
						<view class="order-item">
							<up-icon name="rmb-circle" color="#4a4a4a"></up-icon>
							<text>客户付款方式：</text>
							<text class="myText">{{ item.customerPay }}</text>
						</view>

						<view class="order-item">
							<up-icon name="map" color="#4a4a4a"></up-icon>
							<text>省市区：</text>
							<text class="myText">{{ getAddressText(item) }}</text>
						</view>
						<view class="order-item">
							<up-icon name="map-fill" color="#4a4a4a"></up-icon>
							<text>详细地址：</text>
							<text class="myText">{{ getDetailAddress(item) }}</text>

						</view>
						<view class="order-bom">
							<view class="order-bom-left"></view>
							<view class="order-bom-right">
								<view class="box2" @click="delet(item.customerId)">删除</view>
								<view class="box3" @click="edit(item)">编辑</view>
							</view>
						</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
		<view>
		</view>
		<!-- 		<up-modal :show="popupShow" title="请输入取消理由" :showConfirmButton="false">
			<view style="width: 100%;">
				<up-textarea v-model="cancelValue" placeholder="请输入内容"></up-textarea>
				<view style="display: flex;">
					<u-button text="取消" type="error" shape="circle" plain @click="popupShow=false"></u-button>
					<u-button slot="confirmButton" text="确定" type="primary" shape="circle" plain
						@click="confirmCancel"></u-button>
				</view>
			</view>
		</up-modal> -->
		<u-popup :show="popupShow" @close="close" @open="open" mode="top">
			<view style="padding: 10rpx;">
				<up-form class="apply-form-field" ref="orderForm" :model="query" labelPosition="left"
					:labelStyle="labelStyle" :borderBottom="true">
					<up-form-item label="客户姓名" label-width="120" prop="customerName" :borderBottom="true">
						<up-input placeholder="请输入客户姓名" type="text" class="form-field-select"
							v-model="query.customerName" border="none" clearable />
					</up-form-item>
					<up-form-item label="联系方式" label-width="120" prop="customerPhone" :borderBottom="true">
						<up-input placeholder="请输入联系方式" type="text" class="form-field-select"
							v-model="query.customerPhone" border="none" clearable />
					</up-form-item>
					<up-form-item label="部门" label-width="120" prop="departmentName" :borderBottom="true"
						@tap="departmentShow = true">
						<up-input placeholder="请选择部门" type="text" class="form-field-select"
							v-model="query.departmentName" border="none" readonly />
					</up-form-item>
					<up-form-item label="销售人员" label-width="120" prop="salePerson" :borderBottom="true"
						@tap="salePersonShow = true">
						<up-input placeholder="请选择销售人员" type="text" class="form-field-select" v-model="query.salePerson"
							border="none" readonly />
					</up-form-item>
					<up-form-item label="所在区域" label-width="120" prop="department" :borderBottom="true"
						@tap="areListShow=true">
						<up-input placeholder="请选择客户所在区域" type="text" class="form-field-select"
							v-model="query.department" border="none" readonly />
					</up-form-item>
					<up-form-item label="客户形式" label-width="120" prop="customerForm" :borderBottom="true"
						@tap="formShow=true">
						<up-input placeholder="请选择客户所在区域" type="text" class="form-field-select"
							v-model="query.customerForm" border="none" readonly />
					</up-form-item>
				</up-form>
				<view style="display: flex;margin-top: 10rpx;">
					<u-button text="重置" style="width: 300rpx;" @click="clear()"></u-button>
					<u-button type="primary" text="搜索" style="width: 300rpx;" @click="search()"></u-button>
				</view>

			</view>
		</u-popup>
		<u-modal :show="modalShow" :showConfirmButton="false">
			<view class="slot-content">
				<rich-text nodes="加载数据,请稍后..."></rich-text>
			</view>
		</u-modal>

		<!-- 部门联动 -->
		<u-picker :show="departmentShow" :columns="departmentColumns" keyName="departmentName"
			@confirm="departmentConfirm" @close="departmentClose" @cancel="departmentClose" closeOnClickOverlay>
		</u-picker>

		<!-- 所在区域联动 -->
		<u-picker :show="areListShow" :columns="areList" keyName="regionName" @confirm="areListConfirm"
			@close="areListClose" @cancel="areListClose" closeOnClickOverlay></u-picker>

		<!-- 销售人员联动 -->
		<u-picker :show="salePersonShow" :columns="salePersonList" keyName="realName" @confirm="salePersonConfirm"
			@close="salePersonClose" @cancel="salePersonClose" closeOnClickOverlay></u-picker>

		<up-modal :show="deleteShow" :showConfirmButton="true" :showCancelButton="true" @close="deleteShow = false"
			@cancel="deleteShow = false" content="是否删除该客户信息?" @confirm="confirmDelete(deleteId)">
		</up-modal>

		<!-- 客户形式联动 -->
		<u-picker :show="formShow" :columns="formList" keyName="customerForm" @confirm="formConfirm"
			@close="formShow = false" @cancel="formShow = false" closeOnClickOverlay></u-picker>

		<!-- 申请日期 -->
		<!-- 		<u-calendar :show="createDateShow" mode="range" @confirm="createDateConfirm" title="请选择申请日期" :minDate="minDate"
			:maxDate="maxDate" :monthNum="12" @close="createDateShow=false"></u-calendar> -->

		<!-- 消息提示	 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import customerApi from '@/apis/gyl/customer.js';
	import baseApi from '@/apis/gyl/base.js';
	import departmentApi from '@/apis/gyl/department.js';
	import userApi from '@/apis/gyl/user.js';
	export default {
		name: "yt-order-list",
		data() {
			return {
				minDate: '2024-12-01',
				maxDate: '2035-01-01',
				createDateShow: false,
				formShow: false,
				formList: [],
				deleteShow: false,
				deleteId: null,
				orderNum: '',
				lineBg: '',
				dataList: [],
				cancelId: null,
				pageNo: 1,
				pageSize: 8,
				status: 1,
				modalShow: false,
				messageShow: false,
				popupShow: false,
				cancelValue: '',
				labelStyle: {
					color: '#646566',
					fontSize: '30rpx'
				},
				departmentShow: false,
				departmentColumns: [],
				areListShow: false,
				areList: [],
				salePersonShow: false,
				salePersonList: [],
				query: {
					customerName: '',
					customerPhone: '',
					departmentId: '',
					departmentName: '',
					salePerson: '',
					department: '',
					customerForm: '',

				}
			};
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/supplyChain/customer/add'
			});
		},
		methods: {
			/**
			 * 获取省市区文本
			 * @param {Object} item 客户数据
			 * @returns {String} 省市区文本
			 */
			getAddressText(item) {
				// 优先使用addressList中的默认地址
				const defaultAddress = this.getDefaultAddress(item);
				if (defaultAddress) {
					return `${defaultAddress.province}/${defaultAddress.city}/${defaultAddress.district}`;
				}

				// 如果没有addressList，回退到原来的字段
				return `${item.textProvince || ''}/${item.textCity || ''}/${item.textArea || ''}`;
			},

			/**
			 * 获取详细地址
			 * @param {Object} item 客户数据
			 * @returns {String} 详细地址
			 */
			getDetailAddress(item) {
				// 优先使用addressList中的默认地址
				const defaultAddress = this.getDefaultAddress(item);
				if (defaultAddress) {
					return defaultAddress.detail;
				}

				// 如果没有addressList，回退到原来的字段
				return item.customerAddress || '';
			},

			/**
			 * 获取默认地址（isDefault=1的地址）
			 * @param {Object} item 客户数据
			 * @returns {Object|null} 默认地址对象
			 */
			getDefaultAddress(item) {
				if (!item.addressList || !Array.isArray(item.addressList) || item.addressList.length === 0) {
					return null;
				}

				// 查找默认地址
				const defaultAddress = item.addressList.find(addr => addr.isDefault === 1);
				if (defaultAddress) {
					return defaultAddress;
				}

				// 如果没有默认地址，返回第一个地址
				return item.addressList[0];
			},
			createDateConfirm(e) {

			},

			formConfirm(e) {
				this.formShow = false;
				this.query.customerForm = e.value[0].customerForm;
			},
			/**
			 * 删除id
			 * @param {Object} id
			 */
			delet(id) {
				this.deleteShow = true;
				this.deleteId = id;
			},

			getColor() {
				if (this.query.customerName != '' || this.query.departmentName != '' || this.query.salePerson != '' ||
					this.query.department != '' || this.query.customerForm != '' || this.query.customerPhone != '') {
					return 'red'
				} else {
					return 'black'
				}
			},

			/**
			 * 重置
			 */
			clear() {
				this.query.customerName = '';
				this.query.departmentId = '';
				this.query.departmentName = '';
				this.query.salePerson = '';
				this.query.department = '';
			},

			open() {
				// console.log('open');
			},

			close() {
				this.popupShow = false;
				// this.search();
			},

			/**
			 * 部门确定
			 * @param {Object} e
			 */
			departmentConfirm(e) {
				console.info(e)
				this.query.departmentId = e.value[0].id; //获取选择的数据
				this.query.departmentName = e.value[0].departmentName; //获取选择的数据
				this.departmentShow = false;
				this.handleQuery(e.value[0].id);
				this.query.salePerson = '';
			},

			/**
			 * 部门取消
			 */
			departmentClose() {
				this.departmentShow = false;
			},

			/**
			 * 所在区域确定
			 * @param {Object} e
			 */
			areListConfirm(e) {
				this.query.department = e.value[0].regionName; //获取选择的数据
				this.areListShow = false;
			},

			/**
			 * 所在区域取消
			 */
			areListClose() {
				this.areListShow = false;
			},

			/**
			 * 销售人员确定
			 * @param {Object} e
			 */
			salePersonConfirm(e) {
				this.query.salePerson = e.value[0].realName; //获取选择的数据
				this.salePersonShow = false;

			},

			/**
			 * 销售人员取消
			 */
			salePersonClose() {
				this.salePersonShow = false;
			},

			/**
			 * 搜索
			 */
			search() {
				this.pageNo = 1;
				this.pageSize = 8;
				this.dataList = [];
				this.modalShow = true;
				this.popupShow = false;
				this.list();
			},

			/**
			 * type:1详情 2物流
			 * 路由跳转
			 * @param {Object} url
			 */
			navTo(url, id, status, type) {
				uni.navigateTo({
					url: url + "?id=" + id + "&status=" + status + "&type=" + type
				});
			},

			/**
			 * 触底调用
			 */
			scrolltolower() {
				this.modalShow = true;
				this.pageNo++;
				this.list();
			},

			/**
			 * 删除客户
			 * @param {Object} id
			 */
			confirmDelete(id) {
				this.delete(id);
			},
			// ------------------------------------------------------------------------------------------------ api ----------------------------------------------------------------------------------------
			/**
			 * 删除客户信息
			 * @param {Object} id
			 */
			async delete(id) {
				const res = await customerApi.delete({
					customerId: id
				});
				this.deleteShow = false;
				if (res.success) {
					this.$refs.uToast.show({
						type: 'success',
						message: '客户删除成功',
						duration: 1500, // 设置适当的持续时间
						complete: () => {
							this.pageNo = 1;
							this.pageSize = 8;
							this.dataList = [];
							this.modalShow = true;
							this.list();
						}
					});
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: '客户删除失败',
						duration: 1500 // 设置适当的持续时间
					});
				}
			},
			/**
			 * 列表查询
			 */
			async list() {
				const res = await customerApi.getCustomerList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					userName: 'mf.gangke',
					departmentId: this.query.departmentId,
					department: this.query.department,
					salePerson: this.query.salePerson,
					customerName: this.query.customerName,
					customerForm: this.query.customerForm,
					customerPhone: this.query.customerPhone
				});
				if (res.success) {
					if (res.data.records.length == 0) {
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: '没有更多了'
						});
					} else {
						this.dataList.push(...res.data.records);
					}
				}
				this.modalShow = false;
			},

			/**
			 * 获取部门数据
			 */
			async getDepartmentListApi() {
				const res = await departmentApi.listNoTree();
				this.departmentColumns = [];
				if (res.success) {
					const list = res.data;
					// const departmentColumns = list.map(item => item.departmentName);
					this.departmentColumns.push(list);
				}
			},

			async handleQuery(id) {
				//发送查询请求
				const params = {
					departmentId: id,
					pageNo: 1,
					pageSize: 2000
				}
				let res = await userApi.getUserList(params);
				this.salePersonList = [];
				if (res.success) {
					this.salePersonList.push(res.data.records)
				}
			},

			/**
			 * 获取所在区域
			 */
			async getAreaListApi() {
				const res = await baseApi.listArea();
				this.areList = [];
				if (res.success) {
					this.areList.push(res.data)
				}
			},

			/**
			 * 编辑
			 * @param {Object} item
			 */
			async edit(item) {
				// 确保addressList数据完整
				const customerData = {
					...item,
					// 为了兼容编辑页面，同时保留新旧字段
					textProvince: item.textProvince,
					textCity: item.textCity,
					textArea: item.textArea,
					customerAddress: item.customerAddress,
					addressList: item.addressList || []
				};
				uni.setStorageSync("customer", customerData);
				uni.navigateTo({
					url: '/pages/supplyChain/customer/add?type=' + 'edit'
				});
			},

			/**
			 * 客户形式
			 */
			async getCustomerForm() {
				var data = {
					pageNo: 1,
					pageSize: 30,
				};
				let res = await userApi.getClientFormList(data);
				this.formList = [];
				if (res.success) {
					this.formList.push(res.data.records);
				}
			},
		},
		onLoad() {
			// this.modalShow = true;
			// this.list();
			// this.getTotal();
		},
		onShow() {
			this.getDepartmentListApi();
			this.getAreaListApi();
			this.handleQuery('');
			this.getCustomerForm();
			this.$nextTick(() => {
				this.pageNo = 1;
				this.pageSize = 8;
				this.modalShow = true;
				this.dataList = [];
				this.list();
			})

		}
	}
</script>

<style lang="scss" scoped>
	.apply-form-field {
		background: #ffffff;

		.u-form-item {
			padding: 0px 15px !important;
		}

		.input-placeholder {
			text-align: left !important;
			font-size: 28rpx;
		}

		.uni-input-input {
			text-align: left !important;
		}

		.form-field-select {
			.u-iconfont {
				font-size: 0 !important;
			}
		}

		.add-user {
			color: #bfbfbf;
			font-size: 30px;
		}

		.apply-name {
			color: #333333;
			line-height: 20px;

			span {
				color: #999999;
				display: block;

			}
		}

		.apply-link {
			.u-link {
				color: #5ab149 !important;
				padding: 0 5px;
			}
		}

		.u-close--top-right {
			top: 5px !important;
		}

		.popup-title {
			color: #333333;
			padding: 5px 10px;
			font-size: 30rpx;
		}

		.u-cell {
			padding: 8px 12px !important;
		}
	}

	.u-sticky {
		border-bottom: 1px solid #d7d9da;
		box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
		// margin-bottom: 25rpx;
	}

	.head {
		background-color: #f3f3f3;
	}

	::v-deep .myList {
		// padding-top: 10rpx;
		// height: 1000px !important;
		// background-color: red;
		// position: fixed;
		// .uni-scroll-view {
		// 	.uni-scroll-view {
		// 		// overflow: visible !important;
		// 		// height: 100%;
		// 	}
		// }

	}

	.green {
		color: green;
	}

	.red {
		color: red;
	}

	.blue {
		color: #4b5eeb;
	}

	.order {
		// width: 100%;
		// height: 200rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 15rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		// margin-bottom: 25rpx;
		margin: 10px 20rpx 25rpx 20rpx;
		position: relative;

		.order-number {
			width: 100%;
			color: #c73614;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f3f3f3;
			padding-bottom: 20rpx;
			height: 60rpx;

			.number-left {
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				text {
					font-size: 30rpx;
					letter-spacing: 3rpx;
				}

			}

			.number-right {
				font-size: 26rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
				padding-right: 5rpx;
				box-sizing: border-box;
			}

		}

		.order-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}

			.u-icon {
				margin-right: 5rpx;
			}

			text {
				font-size: 24rpx;
				color: rgba(170, 170, 170, 0.8);
			}

			.myText {
				font-weight: bold;
				color: rgba(2, 2, 2, 0.8);
			}
		}

		.order-bom {
			width: 100%;
			height: 60rpx;
			background-color: #f9f9f9;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-bom-left {
				color: rgba(0, 0, 0, 0.5);
				font-size: 24rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.order-bom-right {
				// width: 200rpx;
				height: 100%;
				display: flex;
				color: #ffffff;
				font-size: 26rpx;

				.box1 {
					height: 100%;
					line-height: 60rpx;
					background-color: #e5a84a;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box2 {
					height: 100%;
					line-height: 60rpx;
					background-color: #ff0000;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box3 {
					height: 100%;
					line-height: 60rpx;
					background-color: #526afc;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					// margin-right: 10rpx;
				}

				.box4 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aa55ff;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box5 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aa557f;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box6 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aaaa00;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box7 {
					height: 100%;
					line-height: 60rpx;
					background-color: #00a1ec;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box8 {
					height: 100%;
					line-height: 60rpx;
					background-color: #b90000;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
			}
		}
	}


	// .badge-container {
	// 	position: relative;
	// }

	// .badge-container::after {
	// 	content: '待分配';
	// 	position: absolute;
	// 	top: -10rpx;
	// 	right: 0rpx;
	// 	background-color: #6d6d6d;
	// 	color: white;
	// 	border-radius: 0% 0% 30% 30%;
	// 	width: 100rpx;
	// 	height: 50rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	font-size: 12px;
	// }

	.badge {
		position: absolute;
		top: -10rpx;
		right: 0rpx;
		background-color: green;
		color: white;
		border-radius: 0% 0% 30% 30%;
		width: 160rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	::v-deep .u-textarea__field {
		border: 1px solid #d8d2d0 !important;
	}
</style>
